<!--
 @description 轻居客户处理
 @fileName DisCustomerDeal.vue
 @author zengqiongying
 @created 2023/04/20 20:17:17
-->
<template>
  <div class="dis-deal-item">
    <div class="dis-info">
      <div class="title">
        <span class="code">{{ modelValue.code }}</span>
        <span class="color-grey">{{ modelValue.cityLevelName }}</span>
      </div>
      <div>{{ modelValue.name }}</div>
      <div v-if="businessTypeNames.length > 0" class="tags">
        <Tags :list="businessTypeNames" size="mini" plain type="primary" />
      </div>
      <div class="color-grey">{{ cooperateStart }}</div>
    </div>
    <template v-if="readonly">
      <Cell
        title="是否转让销量"
        :modelValue="modelValue.isTransferSales"
        default-value="--"
        readonly
        dict-type-code="BOOLEANS"
      />
      <Cell
        title="装修返利是否到期"
        :modelValue="modelValue.isRebateMaturity"
        default-value="--"
        readonly
        dict-type-code="BOOLEANS"
      />
      <Cell
        title="是否有未交订货"
        :modelValue="modelValue.isUnfulfilledOrder"
        default-value="--"
        readonly
        dict-type-code="BOOLEANS"
      />
      <Cell
        title="未交订货数量是否已提交"
        :modelValue="modelValue.isUnfulfilledOrderSubmit"
        default-value="--"
        readonly
        dict-type-code="BOOLEANS"
      />
    </template>
    <template v-else>
      <FieldSelect
        v-model="formData.isTransferSales"
        title="是否转让销量"
        :url="`/data-dict/app/v2/dictionary/BOOLEANS`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="dictParams"
        clear
        required
      />
      <FieldSelect
        v-model="formData.isRebateMaturity"
        title="装修返利是否到期"
        :url="`/data-dict/app/v2/dictionary/BOOLEANS`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="dictParams"
        clear
        required
      />
      <FieldSelect
        v-model="formData.isUnfulfilledOrder"
        title="是否有未交订货"
        :url="`/data-dict/app/v2/dictionary/BOOLEANS`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="dictParams"
        clear
        required
      />
      <FieldSelect
        v-model="formData.isUnfulfilledOrderSubmit"
        title="未交订货数量是否已提交"
        :url="`/data-dict/app/v2/dictionary/BOOLEANS`"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="dictParams"
        clear
        :required="[1, '1'].includes(formData.isUnfulfilledOrder)"
      />
    </template>
    <Cell title="经营面积" :modelValue="formData.operateArea" default-value="--" readonly />
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, watch, computed } from 'vue'
  import Tags from '@/components/Tags/index.vue'
  import FieldSelect from '@/components/FieldSelect/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import { parseTime } from '@/utils'
  const none: any[] = ['', null, undefined]
  export default defineComponent({
    name: 'TerminationDisCustomerDeal',
    components: { Tags, FieldSelect, Cell },
    props: {
      modelValue: {
        type: Object,
        default: () => {}
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    setup(props: any, ctx: any) {
      const datas = reactive({
        dictParams: { query: { appCode: 'slm', domainCode: 'marketing' }, type: 0 },
        formData: {
          isTransferSales: '',
          isRebateMaturity: '',
          isUnfulfilledOrder: '',
          isUnfulfilledOrderSubmit: '',
          operateArea: ''
        }
      })

      const businessTypeNames = computed(() => {
        if (props.modelValue.businessTypeName) {
          return props.modelValue.businessTypeName.split(',')
        } else {
          return []
        }
      })
      const cooperateStart = computed(() => {
        if (props.modelValue.cooperateStart) {
          return parseTime(props.modelValue.cooperateStart, '{y}年{m}月{d}日加盟')
        } else {
          return ''
        }
      })
      watch(
        () => props.modelValue,
        (data) => {
          const formData: any = datas.formData
          for (const [k, val] of Object.entries(formData)) {
            let value = data[k]
            if (none.includes(value)) {
              value = ''
            }
            formData[k] = value
          }
          datas.formData = formData
        },
        {
          deep: true,
          immediate: true
        }
      )
      watch(
        () => datas.formData,
        (val) => {
          if (!props.readonly) {
            ctx.emit('update:modelValue', { ...props.modelValue, ...val })
          }
        },
        {
          deep: true
        }
      )
      return {
        ...toRefs(datas),
        cooperateStart,
        businessTypeNames
      }
    }
  })
</script>
<style lang="less" scoped>
  .dis-deal-item {
    position: relative;
    padding: 16px 0;
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 1px solid var(--divisionline-weak);
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    &:last-child::after {
      border-bottom: 0;
    }
  }
  .dis-info {
    padding: 0 16px 8px;
    font: var(--font-main-body);
    color: var(--texticon-default-strong);
    > div:not(:last-child) {
      margin-top: 2px;
    }
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .code {
        font: var(--font-main-title-strengthen);
      }
    }
    .color-grey {
      color: var(--texticon-default-stronger);
    }
    .tags {
      padding: 4px 0;
    }
  }
</style>
